<template>
  <div>
    <page-header title="客户">
      <n-button type="primary" @click.stop="handleShowModal">新增</n-button>
    </page-header>
    <div class="mt-[16px]">
      <n-grid x-gap="12" :cols="4">
        <n-gi>
          <n-input placeholder="请输入" clearable />
        </n-gi>
      </n-grid>
      <div class="mt-[16px]"></div>
      <BasicTable
        :table-props="tableResult"
        :columns="columns"
        :pagination-props="paginationResult"
        :style="{ height: `66vh` }"
      />
    </div>
    <CustomerModal
      width="720px"
      title="新增客户"
      v-model:show="modalShowFlag"
      :action-type="actionType"
      @close="handleHideModal"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { useTableHook } from "@/components/normal/basicTable/useTableHook";
import { getCustomerList } from "@/api/customer/customer.api";
import CustomerModal from "@/components/biz/customerModal/index.vue";
import { useCustomerModal } from "@/components/biz/customerModal/hooks.ts";

const { tableResult, paginationResult, getDataList } = useTableHook<any>({
  api: getCustomerList,
  queryForm: {
    name: "",
  },
  likeKeys: ["name"],
});

const { actionType, modalShowFlag, handleShowModal, handleHideModal } =
  useCustomerModal();

const columns = [
  {
    title: "#",
    type: "index",
    key: "key",
    render: (_: any, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "姓名",
    key: "name",
  },
  {
    title: "联系电话",
    key: "phoneNumber",
  },
  {
    title: "邮箱",
    key: "email",
  },
  {
    title: "操作",
    key: "actions",
    align: "right",
  },
];

onMounted(() => {
  getDataList();
});
</script>
